<template>
    <h2>用户详情页面</h2>
    <table>
        <tr>
            <td>真实姓名</td>
            <td>
                <input type="text" placeholder="请输入真实姓名" v-model="info.U_Name">
            </td>
        </tr>
        <tr>
            <td>联系方式</td>
            <td>
                <input type="text" placeholder="请输入手机号" v-model="info.U_Phone">
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" value="false" checked v-model="info.U_Sex">男
                <input type="radio" name="sex" value="true" v-model="info.U_Sex">女
            </td>
        </tr>
        <tr>
            <td>身份证号</td>
            <td>
                <input type="text" placeholder="请输入身份证号" v-model="info.U_IdCard " @change="Birthday" >
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <input type="date" v-model="info.U_Date">
            </td>
        </tr>
        <tr>
            <td>年收入</td>
            <td>
                <input type="text" placeholder="请输入年收入" v-model="info.U_Income">
            </td>
        </tr>
        <tr>
            <td>用户类型</td>
            <td>
                <select v-model="info.UT_Id">
                <option value="0">--请选择--</option>
                <option  v-for="item in UTinfo" :value="item.UT_Id" >{{item.UT_Name}}</option>
                
                </select>
            </td>
        </tr> 
        <tr>
            <td colspan="2">
            <input type="button" value="提交" @click="Addall">
            </td>
        </tr>
    </table>
       
</template>

<script setup lang="ts">
import {useRoute} from 'vue-router'
import {onMounted} from 'vue'
import axios from 'axios'
import {ref} from 'vue'


const route = useRoute()

alert(route.query.U_Id)

const UTinfo = ref([{
    UT_Id:0,
    UT_Name:""
}])

const info = ref({
    U_Name:"",
    U_Phone:"",
    U_Sex:false,
    U_IdCard:"",
    U_Income:"",
    U_Date:"",
    UT_Id:0,
    
})



//生命周期函数勾
onMounted(()=>{
    LoadUserType();
})

const LoadUserType = ()=>{
    axios({
        method:'get',
        url:'http://localhost:58004//api/Users/ShowUserType'
    })
    .then(res=>{
        console.log(res.data)
        UTinfo.value = res.data;
    })
    .catch(err=>{
        console.log(err)
    })
}

const Birthday=()=>{
        const birthday=info.value.U_IdCard.substring(6,10)+'-'+info.value.U_IdCard.substring(10,12)+'-'+info.value.U_IdCard.substring(12,14);
        info.value.U_Date=birthday;
    }


const Addall =()=>{
    var sU_Phone=/^1[3456789]\d{9}$/
    if(!sU_Phone.test(info.value.U_Phone)
    ){
        alert("手机号格式不正确")
        return;
    }
    
    var sU_IdCard=/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
    if(!sU_IdCard.test(info.value.U_IdCard)
    )
{
        alert("身份证号格式不正确")
        return;
    }

    

    axios({
        method:'post',
        url:'http://localhost:58004//api/Users/AddUserRegister',
        data:{
            U_Id: route.query.U_Id,
            U_Name:info.value.U_Name,
            U_Phone:info.value.U_Phone,
            U_Sex:info.value.U_Sex,
            U_IdCard:info.value.U_IdCard,
            U_Income:info.value.U_Income,
            U_Date:info.value.U_Date,
            UT_Id:info.value.UT_Id,
        }
    })
    .then(res=>{
        console.log(res.data)
        if(res.data>0){
            alert("添加成功")
        }else{
            alert("添加失败")
        }
    })
    .catch(err=>{
        console.log(err)
    })

}

</script>